<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery.min.js"></script>
    <title>电梯导航</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div.one{
            width: 100%;
            height: 400px;
            background: red;
        }
        div.one:nth-child(odd){
            background: green;
        }
        #nav{
            width: 100px;
            position: fixed;
            top: 200px;
            left: 10px;
            display: none;
        }
        li{
            width: 100px;
            height: 100px;
            background: yellow;
        }
        li:nth-child(even){
            background: orange;
        }
        div.r{
            position: fixed;
            top: 300px;
            right: 10px;
            display: none;
            
        }
        button{
            width: 100px;
            height: 100px;
            background: orangered;
        }
        /* 自定义类 */
        .current{
            background: pink;
        }
    </style>
</head>
<body>
    <!-- 当页面滚动到一定距离时，电梯导航才显示出来，当点击电梯导航栏时，页面就滚动到响应位置 -->
    <div class="one">1</div>
    <div class="one">2</div>
    <div class="one">3</div>
    <div class="one">4</div>
    <div id="nav">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div class="r">
        <button>返回顶部</button>
    </div>


    <script>
        // dom元素加载完毕后触发方法
        $(function() {// 先获取到到电梯导航的offset  top   然后如果滚动值》=top值，就显示电梯导航，返回顶部按钮也同理
            // 获取文档被卷去的顶部的数值
            // var a = $(document).scrollTop();
            // console.log(a);
            // // 获取电梯导航距离浏览器顶部的数值
            var b = $('#nav').offset().top;
            if(b==0){
                b=$('body').scrollTop();
            }
            console.log(b);
            // // 获取返回顶部盒子距离浏览器顶部的数值
            var c = $('.r').offset().top;
            if(c==0){
                c=$('body').scrollTop();
            }
            console.log(c);
            function pageY(elem){
              return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
            }
            // A();
            // B();

            function A(){
                // 当文档被卷去的顶部的数值>=电梯导航距离浏览器顶部的偏移时，就显示出来,否则隐藏
                if($(document).scrollTop() >= b){
                    $('#nav').stop().fadeIn();
                }else{
                    $('#nav').stop().fadeOut();
                }
            }
            function B(){
                // 当被卷去的值》=盒子距离顶部的值，就显示
                if($(document).scrollTop() >= c){
                    $('.r').stop().fadeIn();
                }else{
                    $('.r').stop().fadeOut();
                }
            }

            $(window).scroll(function() {// 当页面滚动时触发方法
                A();
                B();
            });
            
            // // 点击按钮时返回顶部
            $('.r').click(function(){
                // $(document).scrollTop(0);
                $("body,html").stop().animate({
                    scrollTop: 0,
                });
            });

            // 当点击电梯导航的某个模块时，页面滚动到相对应的盒子，且该模块增加类，其他模块删除类
            $('#nav li').click(function(){
                $(this).addClass("current").siblings().removeClass("current");
                // 获取当前nav索引号
                console.log($(this).index());
                $("body,html").stop().animate({
                    scrollTop: $('.one').eq($(this).index()).offset().top,
                });
                // $('.one').eq($(this).index());
            });

        })
    </script>
</body>
</html>